<!-- 成本管理编辑弹窗 -->
<template>
  <a-card :bordered="false">
    <a-form
      ref="form2"
      :model="costModalApp.cost"
      :rules="costModalApp.rules"
      :label-col="{md: {span: 7}, sm: {span: 24}}"
      :wrapper-col="{md: {span: 10}, sm: {span: 24}}">
      <a-row :gutter="16">

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="时间:" name="createDatetime">
            <a-date-picker
              :disabled="true"
              format="YYYY-MM-DD"
              v-model:value="costModalApp.cost.createDatetime"
            />
          </a-form-item>
        </a-col>

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="成本类型:" name="type">
            <MDictSelect
              :dict-list="dictList"
              :disabled="!costModalApp.display"
              v-model:value="costModalApp.cost.type"
              placeholder="请选择成本类型"
              dict="成本类型"/>
          </a-form-item>
        </a-col>

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="价格:" name="total">
            <a-input-number
              :disabled="!costModalApp.display"
              v-model:value="costModalApp.cost.total"
              placeholder="请输入价格"
              :min="0"
              :step="0.01"
              class="ele-fluid importanceI"></a-input-number>
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
            <!--class="ele-pull-right"-->
            <teleport to="#costEditModalFooter">
              <div>
                <a-space size="middle">
                  <a-button @click="costListApp.modalShowing=false">取消
                  </a-button>
                  <a-button
                    v-if="costModalApp.display"
                    type="primary"
                    @click="onSubmit(costModalApp.cost)"
                    :loading="loading">提交
                  </a-button>
                </a-space>
              </div>
            </teleport>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
import {defineComponent, inject, reactive, ref, onMounted} from 'vue'
import {useRoute} from "vue-router"
import {CostService} from "@/views/restaurant/material/cost/costService";
import {VXETable} from 'vxe-table'
import MDictSelect from "@/components/MDict/dictSelect";
import moment from "moment";


export default defineComponent({
  components: {MDictSelect},
  setup() {
    // 省市区数据
    const route = useRoute();
    const form2 = ref({})
    let routeId = route.params.id;
    let date = new Date();
    const dictList = [
      {dictName: "水费",sortNumber: 1},
      {dictName: "电费",sortNumber: 1},
      {dictName: "其他成本",sortNumber: 1}
    ]
    let costListApp = inject('costListApp', reactive({}));
    let costGrid = inject('costGrid', reactive({}));
    let gridOptions = inject('gridOptions', reactive({}))
    const costModalApp = reactive({
      id: null,
      cost: {
        createDatetime: null
      },
      isEdit: false,
      display: false
    });
    costModalApp.rules = {
      businessId: [
        {
          required: false,
          type: 'number',
          message: '请输入业务id',
          trigger: 'blur'
        }
      ],
      entityName: [
        {
          required: false,
          type: 'string',
          message: '请输入实体名称',
          trigger: 'blur'
        }
      ],
      type: [
        {
          required: true,
          type: 'string',
          message: '请输入成本类型',
          trigger: 'blur'
        }
      ],
      amount: [
        {
          required: false,
          type: 'number',
          message: '请输入数量',
          trigger: 'blur'
        }
      ],
      price: [
        {
          required: true,
          type: 'number',
          message: '请输入单价',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      costModalApp.cost = reactive({});
      // debugger
      if (routeId) {//路由
        costModalApp.id = routeId;
        costModalApp.display = false;
        findCost(costModalApp.id);
      } else if (costListApp.editModalForEdit) {//修改弹窗
        costModalApp.id = costListApp.currentId;
        costModalApp.display = true;
      } else if (!costListApp.editModalForEdit && costListApp.addModalForEdit) {//新增弹窗
        costModalApp.cost.createDatetime = date.getTime()?moment(date.getTime()):null
        costModalApp.display = true;
      } else if(!costListApp.editModalForEdit && !costListApp.addModalForEdit && costListApp.showModalForEdit){
        costModalApp.id = costListApp.currentId;
        costModalApp.display = false;
      }
      if (costModalApp.id) findCost(costModalApp.id);
    })

    const findCost = (id) => {
      CostService.findCostForView(id).then((res) => {
        costModalApp.cost = res.data;
        costModalApp.cost.createDatetime = moment(costModalApp.cost.createDatetime)
        //TODO:为编辑准备.
        costModalApp.title = "编辑学生 " + costModalApp.cost.name;
      }).catch(error => {
        VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      console.log(data)
        form2.value.validate().then(()=>{
          costModalApp.cost.createDatetime = data.createDatetime?moment(data.createDatetime):null
          data.createDatetime = data.createDatetime?moment(data.createDatetime).format('YYYY-MM-DD HH:mm:ss'):null
          // debugger;
          //当为数组时用逗号连接
          if (data.eid) {
            //修改
            CostService.updateCost(data).then((res) => {
              console.log(res);
              VXETable.modal.message({content: '操作成功', status: 'success'});
              onBack();
            }).catch(error => {
              VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
            })
          } else {
            //新增
            CostService.saveCost(data).then((res) => {
              console.log(res);
              VXETable.modal.message({content: '操作成功', status: 'success'});
              onBack()
            }).catch(error => {
              VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
            })
          }
        })


    }

    /*TODO:返回列表*/
    const onBack = () => {
      setTimeout(() => {
        costGrid.value.commitProxy("query");
      }, 1500);
      costListApp.modalShowing = false;


    }

    return {
      date,
      routeId,
      form2,
      dictList,
      costListApp,
      costGrid,
      gridOptions,
      costModalApp,
      onSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
